<template>
  <div>
    <mt-swipe :auto="4000" class="swipe">
      <mt-swipe-item v-for="(item, index) in imgs" :key="index">
        <img :src="item.url"/>
      </mt-swipe-item>
    </mt-swipe>

    <!-- 九宫格 -->
    <div class="list">
      <ul>
        <li v-for="(item,index) in grids" :key="item.id" >
          <router-link :to="item.router">
            <img :src="item.image"/>
            <p>{{item.text}}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import src1 from '../assets/news.png'

  export default {
    name: "home",
    data() {
      return {
        imgs:[
          {
            url:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1554304575&di=e74a9f94bc6340a7613d555a0d5a31ed&src=http://images1.6zcool.com/pic/096afd673473dced4b98e1de812d5585-0.jpg'
          },
          {
            url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554314659364&di=8f1387634a267a8e5730f7e06b19ba62&imgtype=0&src=http%3A%2F%2Fs3.sinaimg.cn%2Fmw690%2F006hikKrzy7sly9Fzoeb2%26690'
          }
        ],
        grids:[
          {id:1,image:src1,text:'新闻资讯',router:{name:'news'}},
          {id:2,image:src1,text:'图文列表',router:{name:'photos',params:{categoryId:0}}},
          {id:3,image:src1,text:'新闻资讯',router:{name:'news'}},
          {id:4,image:src1,text:'新闻资讯',router:{name:'news'}},
          {id:5,image:src1,text:'新闻资讯',router:{name:'news'}},
          {id:6,image:src1,text:'新闻资讯',router:{name:'news'}}
        ]
      }
    },
    created() {
    },
    methods: {

    }
  }
</script>

<style scoped>
  .swipe {
    height: 150px;
    background-color: blue;
  }
  .swipe img {
    width: 100%;
    height: 100%;
  }
  .list ul {
    display: flex;
    flex-wrap: wrap;
  }
  .list ul li {
    width: 33.33%;
    height: 120px;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items:center;/*垂直居中*/
    justify-content: center;/*水平居中*/
    flex-direction: column;
  }
  .list ul li img {
    display: inline-block;
    width: 50px;
    height: 50px;
  }
</style>
